<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件基础</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 每用一次组件，就会有一个它的新实例被创建 -->
    <div id="components-demo">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>

    <div id="blog-post-demo">
        <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title"></blog-post>
    </div>

    <div id="blog-post-demo2">
        <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>
    </div>

    <!-- 监听子组件事件 
        v-on 监听子组件中的enlarge-text事件（可以是任意事件）
    -->
    <div id="blog-posts-events-demo">
        <div :style="{ fontSize: postFontSize + 'em' }">
            <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"
                v-on:enlarge-text="postFontSize += 0.1"></blog-post>
        </div>
    </div>

    <!-- 使用事件抛出一个值 
        可以通过 $event 访问到被抛出的这个值
    -->
    <div id="blog-posts-events-demo2">
        <div :style="{ fontSize: postFontSize + 'em' }">
            <!-- <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post" v-on:enlarge-text="postFontSize += $event"></blog-post> -->
            <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"
                v-on:enlarge-text="onEnlargeText"></blog-post>
        </div>
    </div>

    <!-- 在组件上使用 v-model -->
    <div id="custom-input-demo">
        <!-- <custom-input v-bind:value="searchText" v-on:input="searchText = $event"></custom-input> -->
        <custom-input v-model="searchText"></custom-input>
    </div>

    <!-- 通过插槽分发内容 -->
    <div id="slot-demo">
        <alert-box>
            Something bad happened.
        </alert-box>
    </div>
</body>
<script>
    // 定义一个名为 button-counter 的新组件
    Vue.component('button-counter', {
        // 一个组件的 data 选项必须是一个函数
        data: function () {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    })

    new Vue({ el: '#components-demo' })


    Vue.component('blog-post', {
        props: ['title'],
        template: '<h3>{{ title }}</h3>'
    })
    new Vue({
        el: '#blog-post-demo',
        data: {
            posts: [
                { id: 1, title: 'My journey with Vue' },
                { id: 2, title: 'Blogging with Vue' },
                { id: 3, title: 'Why Vue is so fun' }
            ]
        }
    })

    Vue.component('blog-post', {
        props: ['post'],
        template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
    </div>
  `
    })
    new Vue({
        el: '#blog-post-demo2',
        data: {
            posts: [
                { id: 1, title: 'My journey with Vue', content: '11', publishedAt: '111', comments: '1111' },
                { id: 2, title: 'Blogging with Vue', content: '22', publishedAt: '222', comments: '2222' },
                { id: 3, title: 'Why Vue is so fun', content: '33', publishedAt: '333', comments: '3333' }
            ]
        }
    })

    Vue.component('blog-post', {
        props: ['post'],
        template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button v-on:click="$emit('enlarge-text')">
        Enlarge text
      </button>
      <div v-html="post.content"></div>
    </div>
  `
    })

    new Vue({
        el: '#blog-posts-events-demo',
        data: {
            posts: [
                { id: 1, title: 'aaaa', content: '11', publishedAt: '111', comments: '1111' },
                { id: 2, title: 'bbbb', content: '22', publishedAt: '222', comments: '2222' },
                { id: 3, title: 'cccc', content: '33', publishedAt: '333', comments: '3333' }
            ],
            postFontSize: 1
        }
    })

    Vue.component('blog-post', {
        props: ['post'],
        template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button v-on:click="$emit('enlarge-text', 0.1)">
        Enlarge text
      </button>
      <div v-html="post.content"></div>
    </div>
  `
    })

    new Vue({
        el: '#blog-posts-events-demo2',
        data: {
            posts: [
                { id: 1, title: 'AAAA', content: '11', publishedAt: '111', comments: '1111' },
                { id: 2, title: 'BBBB', content: '22', publishedAt: '222', comments: '2222' },
                { id: 3, title: 'CCCC', content: '33', publishedAt: '333', comments: '3333' }
            ],
            postFontSize: 1
        },
        methods: {
            onEnlargeText: function (enlargeAmount) {
                this.postFontSize += enlargeAmount
            }
        }
    })

    Vue.component('custom-input', {
        props: ['value'],
        template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
    })
    new Vue({ el: '#custom-input-demo' })

    Vue.component('alert-box', {
        template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
    })
    new Vue({ el: '#slot-demo' })
</script>

</html>